<template>
  <div class='container'>
    <div class="btn_wrapper">
      <span>说明：目前支持学科和关键字条件筛选</span>
      <button type="button" class="el-button el-button--success el-button--small" @click="$router.push('new')">
        <i class="el-icon-edit"></i>
        <span>新增试题</span>
      </button>
    </div>
    <el-form :model="ruleForm" label-width="80px" class="demo-ruleForm">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="学科" prop="subject">
            <el-select v-model="ruleForm.subjectID" placeholder="请选择" @change="handleChange">
              <el-option :label="item.label" :value="item.value" v-for="item in subjects" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" prop="catalog">
            <el-select v-model="ruleForm.catalogID" placeholder="请选择目录">
              <el-option :label="item.directoryName" :value="item.id" v-for="item in catalog" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" prop="tags">
            <el-select v-model="ruleForm.tags" placeholder="请选择活动区域">
              <el-option :label="item.tagName" :value="item.id" v-for="item in tags" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="试题类型" prop="questionType">
            <el-select v-model="ruleForm.questionType" placeholder="请选择试题类型">
              <el-option :label="item.label" :value="item.value" v-for="item in questionType" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" prop="difficulty">
            <el-select v-model="ruleForm.difficulty" placeholder="请选择难度">
              <el-option :label="item.label" :value="item.value" v-for="item in difficulty" :key="item.value"></el-option>

            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" prop="direction">
            <el-select v-model="ruleForm.direction" placeholder="请选择方向">
              <el-option :label="item.direction" :value="item.id" v-for="item in choiceList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" prop="creatorID">
            <el-select v-model="ruleForm.creatorID" placeholder="请选择">
              <el-option :label="item.username" v-for="item in user" :key="item.id" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-row>
            <el-form-item label="城市" prop="provinces">
              <el-col :span="11">
                <el-select v-model="ruleForm.provinces" placeholder="省" @change="handleProvince">
                  <el-option v-for="item in citySelect.province" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
              <el-col :span="11" :offset="2">
                <el-select v-model="ruleForm.city" placeholder="市">
                  <el-option v-for="item in citySelect.cityDate" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="4" :offset="2">
          <el-row style="text-align: right;">
            <el-col :span="24">
              <el-button size="small " @click="handleClear">清除</el-button>
              <el-button size="small " type="primary" @click="handleQuery">搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据记录 -->
    <el-alert :title="`数据一共${count}条`" type="info" :closable="false" show-icon>
    </el-alert>
    <!-- end -->
    <!-- 数据列表 -->
    <el-table :data="tableData" element-loading-text="给我一点时间" fit highlight-current-row style="width: 100%">
      <el-table-column label="试题编号" prop="number">
        <template></template>
      </el-table-column>
      <el-table-column label="学科" prop="subject">
        <template></template>
      </el-table-column>
      <el-table-column label="目录" prop="catalog">
        <template></template>
      </el-table-column>
      <el-table-column label="题型" prop="questionType" :formatter="Formmatter2">

      </el-table-column>
      <el-table-column label="题干" width="280px" prop="question">
        <template slot-scope="scope">
          <span v-html="scope.row.question"></span>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="180px">
        <template slot-scope="scope">
          {{scope.row.addDate | dateFormat}}
        </template>
      </el-table-column>
      <el-table-column label="难度">
        <template v-slot="{row}">
          {{Formmatter(row)}}
        </template>
      </el-table-column>
      <el-table-column label="录入人" prop="creator">
        <template></template>
      </el-table-column>
      <!-- 操作按钮 -->
      <el-table-column align="center" fixed="right" label="操作" width="240px" v-slot='{row}'>
        <el-button type="primary" icon="el-icon-view" circle plain title="预览" @click="detailList(row)"></el-button>
        <el-button type="success" icon="el-icon-edit" circle plain title="修改" @click="$router.push(`new?id=${row.id}`)"></el-button>
        <el-button type="danger" icon="el-icon-delete" circle plain title="删除" @click="handleDelete(row.id)"></el-button>
        <el-button type="warning" icon="el-icon-check" circle plain title="精选" @click="addchoice(row.id)"></el-button>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <!-- 分页 -->
    <el-pagination background :current-page="ruleForm.page" :page-size="ruleForm.pagesize" :page-sizes="[2,3,5,10]" layout="->,prev, pager, next,sizes,jumper" :total="count" @size-change='changeSize' @current-change='changePage'>
    </el-pagination>
    <preview :dialogVisible.sync="dialogVisible" :ll="ll" :questionType="questionType" :difficulty="difficulty"></preview>
  </div>
</template>

<script>
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions.js'
import { difficulty, questionType } from '@/api/hmmm/constants.js'
import { simple } from '@/api/hmmm/subjects.js'
import { list as catalog } from '@/api/hmmm/directorys.js'
import { list as tags } from '@/api/hmmm/tags.js'
import { list as users } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import preview from '../components/questions-preview.vue'
export default {
  data () {
    return {
      // 弹窗数据
      ll: {},
      dialogVisible: false, // 弹出框
      // 数据条数
      count: 0,
      ruleForm: {
        page: 1, // 当前页数
        pagesize: 2, // 每页数量
        subject: '', // 学科
        // subjectID: '', // 学科
        catalog: '', // 二级目录
        // catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        TopicNotes: '', // 题目备注
        business: '', // 企业简称
        provinces: '',
        city: ''
      },

      // 难度
      difficulty: difficulty,
      // 题型
      questionType: questionType,
      // 学科
      subjects: [],
      user: [], // 录入人
      catalog: [],
      tags: [],
      currentPage4: 1,
      choiceList: [],
      tableData: [],
      // 城市
      citySelect: {
        province: [],
        cityDate: []
      }
    }
  },
  created () {
    this.initSubList()
    // 学科
    this.subjectList()
    // 用户
    this.usersList()
    // 城市
    this.getCityData()
    this.catalogList()
    // 标签
    this.tagsList()
  },
  components: {
    preview
  },
  methods: {
    handleChange (subID) {
      this.catalogList(subID)
      this.tagsList(subID)
    },
    // 每页条数变化
    changeSize (size) {
      this.ruleForm.page = 1
      this.ruleForm.pagesize = size
      this.initSubList()
    },
    // 页码变化
    changePage (page) {
      this.ruleForm.page = page
      this.initSubList()
    },
    // 弹窗
    async detailList (row) {
      const ret = await detail(row)
      this.dialogVisible = true
      this.ll = ret.data
      // console.log(row)
    },
    // 获取学科列表
    async initSubList () {
      const { data: ret } = await list(this.ruleForm)
      this.choiceList = ret.items
      this.tableData = ret.items
      this.count = ret.counts
    },
    // 获取科目
    async catalogList (id) {
      const { data: { items } } = await catalog({ page: 1, pagesize: 100, subjectID: id })
      this.catalog = items
      // console.log(items)
    },
    async subjectList () {
      const { data: subject } = await simple()
      this.subjects = subject
    },
    // 获取标签
    async tagsList (id) {
      const ret = await tags({ page: 1, pagesize: 100, subjectID: id })
      this.tags = ret.data.items
    },
    async usersList () {
      const { data: { list: user } } = await users()
      this.user = user
    },
    // 获取省
    getCityData () {
      this.citySelect.province = provinces()
    }, // 选省获取到市
    handleProvince (e) {
      this.citySelect.cityDate = citys(e)
      this.ruleForm.city = this.citySelect.cityDate[0]
    },
    // 难度
    Formmatter (row) {
      const info = this.difficulty.find(item => parseInt(item.value) === parseInt(row.difficulty))
      if (info) {
        return info.label
      }
    },
    // 题型
    Formmatter2 (row) {
      const info = this.questionType.find(item => parseInt(item.value) === parseInt(row.questionType))
      return info ? info.label : '其他'
    },
    // 删除
    handleDelete (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const ret = await remove({ id })
        if (ret.status === 200) {
          this.$message.success('删除成功')
        } else {
          this.$message.error('删除失败')
        }
        this.initSubList()
      })
    },
    // 加入精选
    addchoice (id) {
      this.$confirm('是否确定将题目加入精选题库', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const ret = await choiceAdd({ id, choiceState: 1 })
        if (ret.status === 200) {
          this.$message.success('加入精选题库成功')
          remove({ id })
        } else {
          this.$message.error('加入精选题库失败')
        }
        this.initSubList()
      })
    },
    // 查询
    handleQuery () {
      this.initSubList()
    },
    // 清空表单
    handleClear () {
      this.ruleForm = this.$options.data().ruleForm
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 100%;
}
.container {
  padding: 15px;
  margin: 15px;
  background: #fff;
}
.btn_wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.btn_wrapper span:first-child {
  color: pink;
  font-size: 12px;
}
.el-form {
  background: #fff;
}

.el-col {
  padding: 0 !important;
}
.el-row {
  margin: 0 !important;
}
.el-table {
  margin-top: 20px;
}
.el-form-item--medium {
  margin-bottom: 15px;
}
</style>
